<template>
  <div class="form-index-container">
    <div class="header-container">
      <el-row align="middle" type="flex" class="header-row">
        <el-col :span="2">
          <i class="el-icon-back" @click="goBack" />
        </el-col>
        <el-col v-if="!isMobile">
          <el-menu
            :default-active="defaultActiveMenu"
            class="form-menu control-box"
            mode="horizontal"
            @select="menuSelectHandle"
          >
            <el-menu-item v-for="menuItem in menuItemList" :key="menuItem.route" :index="menuItem.route">
              <i :class="menuItem.icon" />
              <span slot="title">{{ menuItem.title }}</span>
            </el-menu-item>
          </el-menu>
        </el-col>
        <el-col v-if="isMobile" :span="15" :xs="{span: 10, offset: 5}">
          <el-menu
            :default-active="defaultActiveMenu"
            class="form-menu"
            mode="horizontal"
            @select="menuSelectHandle"
          >
            <el-submenu index="2">
              <template slot="title">
                菜单
              </template>
              <el-menu-item v-for="menuItem in menuItemList" :key="menuItem.route" :index="menuItem.route">
                <i :class="menuItem.icon" />
                <span slot="title">{{ menuItem.title }}</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-col>
        <el-col :span="2" :xs="4">
          <el-button icon="el-icon-view" type="primary" @click="openPreviewHandle">
            预览
          </el-button>
        </el-col>
        <el-col v-if="!isMobile" :span="2" :xs="6">
          <el-button v-hasPermi="['form:template:save']" icon="el-icon-folder-add" type="success"
                     @click="saveProjectAsTemplateHandle"
          >
            保存为模板
          </el-button>
        </el-col>
      </el-row>
    </div>
    <template-create ref="templateCreate" :form-key="formKey" />
    <router-view />
    <el-dialog
      v-if="previewDialogVisible"
      :visible.sync="previewDialogVisible"
      class="preview-dialog"
      destroy-on-close
      fullscreen
    >
      <pre-view :key="previewKey" :preview-qrcode="true" />
    </el-dialog>
  </div>
</template>

<script>
import PreView from '@/views/form/preview'
import TemplateCreate from '@/views/project/template/create'
import {getProjectRequest} from "../../api/project/form"

export default {
  name: 'NewIndex',
  components: {TemplateCreate, PreView},
  data() {
    return {
      previewKey: +new Date().getTime(),
      previewDialogVisible: false,
      screenWidth: '',
      defaultActiveMenu: 'editor',
      formKey: null,
      formName:'',
      folderId: 0,
      isMobile: false,
      menuItemList: [
        {
          title: '编辑',
          icon: 'el-icon-edit',
          route: '/project/form/editor'
        },
        {
          title: '逻辑',
          icon: 'el-icon-menu',
          route: '/project/form/logic'
        }, {
          title: '外观',
          icon: 'el-icon-view',
          route: '/project/form/theme'
        },
        {
          title: '流程',
          icon: 'el-icon-takeaway-box',
          route: '/project/form/workflow'
        },
        {
          title: '设置',
          icon: 'el-icon-setting',
          route: '/project/form/setting'
        },
        {
          title: '发布',
          icon: 'el-icon-video-play',
          route: '/project/form/publish'
        }, {
          title: '数据',
          icon: 'el-icon-s-data',
          route: '/project/form/data'
        }, {
          title: '统计',
          icon: 'el-icon-data-line',
          route: '/project/form/statistics'
        }
      ]
    }
  },
  created() {
    this.formKey = this.$route.query.key
    this.formName = this.$route.query.name
    this.defaultActiveMenu = this.$route.path
    this.folderId = this.$route.query.folderId
    getProjectRequest(this.formKey).then((res) => {
      if (res.data) {
        if (res.data.type !== 2) {
          // 移除工作流
          this.menuItemList.splice(3, 1)
        }
      }
    })
  },
  mounted() {
    this.isMobile = document.body.clientWidth < 1110
    window.onresize = () => {
      this.isMobile = document.body.clientWidth < 1110
    }
  },
  methods: {
    menuSelectHandle(index) {
      this.defaultActiveMenu = index
      this.$router.replace({path: index, query: {key: this.formKey,name:this.formName}})
    },
    openPreviewHandle() {
      this.previewKey = +new Date()
      this.previewDialogVisible = true
    },
    saveProjectAsTemplateHandle() {
      this.$refs['templateCreate'].handleOpen()
    },
    goBack() {
      this.$router.push({path: this.$store.state.form.backRoute})
    }
  }
}
</script>

<style lang="scss" scoped>

.form-index-container {
  height: 100%;
  width: 100%;
}

::v-deep .el-card__body {
  padding: 0;
}

.header-container {
  width: 100%;
  height: 50px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  padding: 0 15px;
  border-bottom: 1px solid #70707038;
  background: #fff;

  .el-icon-back {
    font-size: 22px;
    font-weight: 550;
    cursor: pointer;
    color: #000;

    &:hover {
      color: var(--color-primary);
    }
  }

  .control-box {
    display: flex;
    justify-content: center;
  }

  .form-menu {
    background-color: transparent;
    .el-menu-item,
    .el-submenu__title {
      color: var(--color-blacks) !important;
    }
  }
}

.form-main-container {
  width: 100vw;
  min-height: calc(100vh - 60px);
  display: flex;
  flex-direction: row;
  background-color: var(--color-bg);
}

::v-deep.preview-container {
  background-color: var(--color-bg);
}

.preview-dialog {
  height: 100% !important;
  overflow: hidden !important;
}

::v-deep .el-dialog.is-fullscreen {
  overflow: hidden;
}

::v-deep .preview-dialog .el-dialog__body {
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}


@media screen and (max-width: 767px) {
  .el-menu-item,
  .el-submenu__title {
    height: 50px !important;
    line-height: 50px !important;
    color: var(--color-blacks) !important;
    transition: none !important;
  }

  .header-row {
    height: 100%;
  }
}

</style>
